import React from "react";
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";
import * as echarts from "echarts";

import {
  CockpitChartBaseProps,
  echartsCockpitTheme,
} from "../helps/echartsCommon";

export const getKxMonthlyProgressTrendOfProjectsConstructionLineChartOption = ({
  planAmount = [],
  realAmount = [],

  dates = [],
}: KxMonthlyProgressTrendOfProjectsConstructionLineChartProps): EChartsOption => {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(0, 255, 233,0)",
              },
              {
                offset: 0.5,
                color: "rgba(255, 255, 255,1)",
              },
              {
                offset: 1,
                color: "rgba(0, 255, 233,0)",
              },
            ],
            global: false,
          },
        },
      },
    },
    legend: {
      right: "5%",
      data: ["计划进度", "实际进度"],
      // left: 10,
      top: 12,
      textStyle: {
        fontSize: 14,
        color: "#FDFFFF",
      },
      icon: "circle",
      itemWidth: 7,
      // itemHeight: 6,
    },
    grid: {
      top: "15%",
      left: "10%",
      right: "5%",
      bottom: "15%",
      // containLabel: true
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          show: false,
          // color: "#A582EA",
        },

        axisLabel: {
          fontSize: 12,
          fontFamily: "Arial",
          color: "#FDFFFF",
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        boundaryGap: false,
        data: dates,
      },
    ],

    yAxis: [
      {
        type: "value",
        min: 0,
        // max: 140,
        splitNumber: 4,
        splitLine: {
          show: true,
          lineStyle: {
            color: "#FEFFFF",
            opacity: 0.3,
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#FEFFFF",
            opacity: 0.3,
          },
        },
        axisLabel: {
          show: true,

          fontSize: 10,
          fontFamily: "Arial",
          color: "#FDFFFF",
          opacity: 0.8,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "计划进度",
        type: "line",
        showAllSymbol: true,
        symbol: "circle",
        symbolSize: 10,
        showSymbol: false,
        lineStyle: {
          color: "#07E3F7",
        },

        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(43,193,145,0.3)",
              },
              {
                offset: 1,
                color: "rgba(43,193,145,0)",
              },
            ],
            false
          ),
        },
        data: planAmount,
      },
      {
        name: "实际进度",
        type: "line",
        showAllSymbol: true,
        symbol: "circle",
        symbolSize: 10,
        showSymbol: false,
        lineStyle: {
          color: "#ABFFAF",
        },
        // label: {
        //     show: true,
        //     position: 'top',
        //     textStyle: {
        //         color: '#2CABE3',
        //     }
        // },
        // itemStyle: {
        //     color: "#fff",
        //     borderColor: "#2CABE3",
        //     borderWidth: 2,
        // },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(81,150,164,0.3)",
              },
              {
                offset: 1,
                color: "rgba(81,150,164,0)",
              },
            ],
            false
          ),
        },
        data: realAmount,
      },
    ],
  };
};

export interface KxMonthlyProgressTrendOfProjectsConstructionLineChartProps
  extends CockpitChartBaseProps {
  /**
   *  计划
   */
  planAmount?: number[];

  /**
   * 实际
   */
  realAmount?: number[];

  dates?: string[];
}
export const KxMonthlyProgressTrendOfProjectsConstructionLineChart = ({
  reactEChartsProps,
  planAmount = [],
  realAmount = [],

  dates = [],
}: KxMonthlyProgressTrendOfProjectsConstructionLineChartProps) => {
  return (
    <ReactECharts
      theme={echartsCockpitTheme}
      style={{
        height: "466px",
      }}
      option={getKxMonthlyProgressTrendOfProjectsConstructionLineChartOption({
        planAmount,
        realAmount,
        dates,
      })}
      {...reactEChartsProps}
    />
  );
};
export default KxMonthlyProgressTrendOfProjectsConstructionLineChart;
